import React, { useState } from 'react';

import { UserOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Col, Divider, Select } from 'antd';
import logoImage from '../../assets/logo.png';
interface IProps {
  setFormNavigation: (value: string | number) => void;
}

import style from './index.less';

const ChangePassword: React.FC<{}> = (props: IProps) => {
  const { setFormNavigation } = props;
  const [inputData, setInputData] = useState('1');
  const [buttonData, setButtonData] = useState('1');
  const [buttonFlag, setButtonFlag] = useState(true);
  const [Data, setData] = useState('');

  // 手机号倒计时
  var countdown = 60;
  var value;
  function settime() {
    if (countdown === -1) {
      countdown = 60;
      return;
    } else {
      value = '重新发送(' + countdown + ')';
      countdown--;
      if (countdown > 0) {
        setButtonFlag(false);
      }
      setData(value);
      if (countdown === 0) {
        setButtonFlag(true);
        setButtonData('3');
      }
    }

    setTimeout(function () {
      settime();
    }, 1000);
  }

  const { Option } = Select;

  // 点击验证数据状态更改
  const inputStatus: any = {
    1: `请输入手机号`,
    2: '请输入验证码',
  };
  const buttonStatus: any = {
    1: `请输入验证码`,
    2: Data,
    3: '重新发送',
  };
  return (
    <div>
      <div className={style.changepasswordBox}>
        <img src={logoImage} />
      </div>
      <div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
        >
          <Form.Item
            name="gender"
            prefix={<SafetyOutlined className="site-form-item-icon" />}
          >
            <Select
              style={{ textAlign: 'left' }}
              defaultValue="phone"
              // placeholder={t('login.SelectVerificationMethod')}
              allowClear
            >
              <Option value="phone">手机验证</Option>
              <Option value="email">邮箱验证</Option>
            </Select>
          </Form.Item>

          <Form.Item style={{ marginBottom: '0px' }}>
            <Row gutter={(10, 10)}>
              <Col span={15}>
                <Form.Item name="captcha">
                  <Input
                    prefix={<SafetyOutlined className="site-form-item-icon" />}
                    placeholder={inputStatus[inputData]}
                  />
                </Form.Item>
              </Col>
              <Col span={9}>
                {buttonFlag ? (
                  <Button
                    onClick={() => {
                      setInputData('2');
                      setButtonData('2');
                      settime();
                    }}
                  >
                    {buttonStatus[buttonData]}
                  </Button>
                ) : (
                  <Button disabled>{buttonStatus[buttonData]}</Button>
                )}
              </Col>
            </Row>
          </Form.Item>

          <Form.Item name="password">
            <Input.Password
              prefix={<UserOutlined className="site-form-item-icon" />}
              // placeholder={t('login.password')}
            />
          </Form.Item>

          <Form.Item
            name="confirmpassword"
            dependencies={['password']}
            hasFeedback
            rules={[
              {
                required: true,
                message: '请确认密码!',
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次密码不一致!'));
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<UserOutlined className="site-form-item-icon" />}
              // placeholder={t('login.ConfirmPassword')}
            />
          </Form.Item>

          <Button
            style={{ width: '100%' }}
            type="primary"
            onClick={() => {
              setFormNavigation('1');
            }}
          >
            {/* {t('login.confirm')} */}
            完成
          </Button>
        </Form>

        <div className={style.changepasswordformfooter}>
          <a
            href="https://www.allinpayintl.com/ch-zh/us.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            关于通华
          </a>
          <Divider type="vertical" />
          <a
            href="https://www.allinpayintl.com/ch-zh/contact.html"
            style={{ color: 'rgb(69 73 79 / 42%)' }}
          >
            联系我们
          </a>
        </div>
      </div>
    </div>
  );
};
export default ChangePassword;
